<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>新建老师账号</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="container">
                <div class="handle-box">
                    <el-button type="primary" class="handle-del mr10" @click="makeStudent">创建老师</el-button>
                </div>
                <el-table
                    :data="tableData.filter((data) => !search || data.studentNumber.toLowerCase().includes(search.toLowerCase()))"
                    :default-sort="{ prop: 'teamId', order: ' ascending' }"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column label="工号" sortable prop="teacherId"> </el-table-column>
                    <el-table-column label="姓名" sortable prop="teacherName"></el-table-column>
                    <el-table-column label="专业" sortable prop="studentMajor.majorName"> </el-table-column>

                    <el-table-column label="电话" prop="teacherPhone"> </el-table-column>
                    <el-table-column label="邮箱" prop="teacherEmail"> </el-table-column>
                    <el-table-column align="center">
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="search" size="mini" placeholder="输入学号搜索" />
                        </template>
                        <template slot-scope="scope" align="center">
                            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, sizes,prev, pager, next,jumper"
                        :current-page="pageIndex"
                        :page-size="pageSize"
                        :total="pageTotal"
                        :page-sizes="[5, 10, 15, 20]"
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </div>
            <el-dialog title="修改" :visible.sync="makeStudentBox" width="30%">
                <div class="form-box">
                    <el-form :rules="rules" ref="studentForm" :model="studentForm" label-width="80px">
<!--                        <el-form-item label="老师工号" prop="teacherId">-->
<!--                            <el-col :span="11">-->
<!--                                <el-input v-model="studentForm.teacherId"></el-input>-->
<!--                            </el-col>-->
<!--                        </el-form-item>-->
                        <el-form-item label="老师名称" prop="teacherName">
                            <el-col :span="11">
                                <el-input v-model="studentForm.teacherName"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="专业" prop="mid">
                            <el-select v-model="studentForm.mid" placeholder="请选择">
                                <el-option v-for="item in majors" :key="item.majorId" :label="item.majorName" :value="item.majorId">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            search: '',
            makeStudentBox: false,
            tableData: [],
            pageSize: 5,
            pageIndex: 1,
            pageTotal: 0,
            teachers: [],
            majors: [],
            classes: [],
            studentForm: {
                teacherId: '',
                teacherName: '',
                mid: 1
            },

            rules: {
                teacherId: [{ required: true, message: '请输入学号', trigger: 'blur' }],
                teacherName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                mid: [{ required: true, message: '请选择专业', trigger: 'blur' }],
                cid: [{ required: true, message: '请选择班级', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.$http.get('http://localhost:9900/admin/findAllTeacher').then((res) => {
            console.log(res.data);
            this.majors = res.data;
            this.teachers = res.data;
            console.log(this.teachers);
            this.pageTotal = res.data.length;
            this.currentChangePage(this.teachers, 1);
        });
        // this.$http.get('http://localhost:9900/major/findAllMajor').then((res) => {
        //     console.log(res.data);
        //     this.majors = res.data;
        // });
        // this.$http.get('http://localhost:9900/class/findAllClass').then((res) => {
        //     console.log(res.data);
        //     this.classes = res.data;
        // });
    },
    methods: {
        // 分页导航
        handlePageChange(currentPage) {
            this.pageIndex = currentPage;
            this.currentChangePage(this.teachers, currentPage);
        },
        //改变每页条数
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.handleCurrentChange(this.pageIndex);
        },
        handleCurrentChange(currentPage) {
            this.pageIndex = currentPage;
            this.currentChangePage(this.teachers, currentPage);
        },
        //分页显示
        currentChangePage(list, currenPage) {
            let from = (currenPage - 1) * this.pageSize; //0
            let to = currenPage * this.pageSize; //5
            this.tableData = []; //[]
            for (; from < to; from++) {
                if (list[from]) {
                    this.tableData.push(list[from]);
                }
            }
        },
        //新建学生
        makeStudent() {
            this.makeStudentBox = true;
            this.$http.get('http://localhost:9900/major/findAllMajor').then((res) => {
                console.log(res.data);
                this.majors = res.data;
            });
            this.$http.get('http://localhost:9900/class/findAllClass').then((res) => {
                console.log(res.data);
                this.classes = res.data;
            });
        },
        handleEdit(index, row) {
            this.studentForm.studentNumber = row.studentNumber;
            this.studentForm.studentName = row.studentName;
            this.$http.get('http://localhost:9900/major/findAllMajor').then((res) => {
                console.log(res.data);
                this.majors = res.data;
            });
            this.$http.get('http://localhost:9900/class/findAllClass').then((res) => {
                console.log(res.data);
                this.classes = res.data;
            });
            this.makeStudentBox = true;
        },
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要退出吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.$http.get('http://localhost:9900/admin/deleteStudents?number=' + row.studentNumber).then((res) => {
                    this.$message.success('删除成功！');
                    location.reload();
                });
            });
        },
        onSubmit() {
            this.$http.post('http://localhost:9900/admon/addTeacher', this.studentForm).then((res) => {
                console.log(res.data);
                this.majors = res.data;
            });
        }
    }
};
</script>